<style>
  .el-input {
    width: 200px;
  }
</style>

<template>
  <div>
    <div>
      <label style="color: gray">角色名称:</label>
      <el-input v-model="sRoleName" placeholder="请输入角色名称"></el-input> <el-button type="primary" @click="listRoles()">查询</el-button>
    </div>
    <div style="margin-top: 10px">
        <el-button id="addRole" @click="addDialogVisible = true" type="primary">新增</el-button> <el-button @click="editRole(scope.$index,scope.row)" type="primary">编辑</el-button> <el-button type="primary">启用</el-button> <el-button type="primary">禁用</el-button>
    </div>
    <!--新增弹话框-->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="addDialogVisible"
        width="30%"
        :before-close="handleClose"
        @close='closeDialog'>
        <!--角色表单-->
        <div align="center">
          <el-form ref="roleForm" :model="roleForm" :rules="roleRules" label-width="80px">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="roleForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDescription">
              <el-input v-model="roleForm.roleDescription"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
         <!-- <el-button @click="resetFrom('roleForm')">取 消</el-button>-->
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('roleForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--数据网格-->
    <div style="margin-top: 10px">
      <el-table
        :data="tempList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        stripe
        border style="margin-bottom:14px;"
        :empty-text="emptyText">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="roleName" label="角色名称" width="252"></el-table-column>
        <el-table-column property="description" label="角色描述" width="252"></el-table-column>
        <el-table-column property="createUserId" label="创建人" width="252"></el-table-column>
        <el-table-column property="createTime" label="创建时间" width="252"></el-table-column>
        <el-table-column property="isValid" label="是否有效"  prop="isValid">
          <template :id="isValidTemplate" slot-scope="scope">
            <span v-if="scope.row.isValid === 1" style="color: green">有效</span>
            <span v-if="scope.row.isValid === 0" style="color: red">无效</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationClass">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="tempList.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'roleManager',
  data () {
    return {
      roleName: '',
      addDialogVisible: false,
      roleForm: {
        roleName: '',
        roleDescription: ''
      },
      roleRules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { max: 50, message: '不可超过50个字符！', trigger: 'blur' }
        ],
        roleDescription: [
          {required: true, message: '请输入角色描述', trigger: 'blur'},
          {max: 200, message: '不可超过200个字符！', trigger: 'blur'}
        ]
      },
      isValid: '',
      scope: '',
      sRoleName: '',
      sCreateTime: '',
      emptyText: '',
      // total1: 0,
      currentPage: 1,
      pageSize: 10,
      tempList: []
    }
  },
  methods: {
    handleClose: function (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          console.log('done->' + done)
          console.log('beforeClose')
          done()
        })
        .catch(_ => {
        })
    },
    submitForm (roleForm) {
      this.$refs[roleForm].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.$axios({
            method: 'post',
            url: '/api/userserver/role/addRole',
            data: {
              roleName: this.roleForm.roleName,
              description: this.roleForm.roleDescription
            }
          }).then(response => {
            let messsager = response.data
            if (messsager.code === 200) {
              loading.close()
              this.addDialogVisible = false
              this.$message({
                message: messsager.message,
                type: 'success'
              })
            } else {
              loading.close()
              this.addDialogVisible = false
              this.$message.error(messsager.message)
            }
          })
            .catch(err => {
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // resetFrom (roleForm) {
    //   console.log('resetFrom==>' + this.$refs[roleForm].resetFields())
    //   this.$refs[roleForm].resetFields()
    // },
    closeDialog () {
      console.log('close')
      console.log('this.roleForm.roleName->' + this.roleForm.roleName)
      this.roleForm.roleName = ''
      this.roleForm.roleDescription = ''
      // this.resetFrom('roleForm')
    },
    handleSizeChange: function (pageSize) { // 每页条数切换
      console.log('每页下拉显示数据pageSize=>' + pageSize)
      this.pageSize = pageSize
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange: function (currentPage) { // 页码切换
      console.log('点击第几页currentPage=>' + currentPage)
      this.currentPage = currentPage
    },
    listRoles () {
      this.$axios({
        method: 'post',
        url: '/api/userserver/role/listRoles',
        data: {
          roleName: this.sRoleName
        }
      }).then(response => {
        let messager = response.data
        if (messager.code === 200) {
          // loading.close()
          this.tempList = messager.data
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    editRole (index, rows) {
      console.log('index=>' + index)
      console.log('rows=>' + rows)
    }
  },
  mounted: function () {
    this.listRoles()
  }
}
</script>

<style scoped>

</style>
